/* Index CSS */
.container_index {
  position: relative;
  transform: translate(-50%, -50%);
  left:20%;
  top: 0%;
  height: 14.37vh;
  width: 28.12vw;
  cursor: pointer;
}
.container_index h1 {
  color: #ffffff;
  text-align: center;
  font-size: 15vw;
  position: absolute;
}
.container_index p {
	opacity:0;
  color: #ff3c78;
  width: 100%;
  font-size: 2.5vw;
  font-weight: 500;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
}
.container_index:hover h1:nth-child(2) {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transform: translateY(-12vw);
  transition: 0.7s;
}
.container_index:hover h1:nth-child(3) {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(6.2vw);
  transition: 0.7s;
}
.container_index:hover p {
	transition: 1s;
	opacity:100;
}
.row{
	display:flex;
	align-items:center;
	margin:5%;
}
.col{
	width: 50%;
}
.col h1{
	color:#fff;
	font-size:14vw;
	text-align:center;
	margin:0%;
}
.col p{
	color:white;
	font-size:1.7vw;
	margin:0;
	margin-bottom:2%;
	margin-top:5%;
}
.card{
	width:50vw;
	height:40vh;
	padding: 20% 20%;
	display: inline-block;
	border-radius: 20px;
	box-sizing: border-box;
	cursor: pointer;
	margin: 1%;
	background-position:center;
	background-size:cover;
	transition: transform 0.5s ease;
	z-index: 1;	
}
.hover-element {
  position: relative;
  display: inline-block;
}
.hover-text{
  display:none;
  position: absolute;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  width: 100.2%;
  height: 100.2%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  text-decoration:bold;
  transition: display 0.6s ease-in-out;  
}
.hover-text p{
	position:absolute;
  top:35%;
	left:0;
	right:0;
  color: white; 
	font-size:2vw;
}
.hover-element:hover .hover-text {
  display: block;
}
.slika{
	width: 33.33%;
	color:#043a53;
    margin-bottom: 1%;
    text-align: center;
}
.image-container2 {
  position: relative;
  background-image:url("../slike/33.jpg");
  width: 100%;
  height: auto;
  display: block;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in;
}
.image-container {
 position: relative;
  background-image:url("../slike/33.jpg");
  width: 100%;
  height: auto;
  display: block;
  background-size: cover;
  background-position: center;
  transition: background-image 0.5s ease-in;
}
.image-container::before, .image-container2::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  pointer-events: none;
  z-index: 0;
}


@media only screen and (max-width: 1024px) and (orientation: portrait) {

    .row{
	display:block;
	align-items:center;
	margin:3%;
}
.col{
	width:100%;
	margin-bottom:5%;
}
.col p{
	font-size:2.5vh;
}
.col h1{
	font-size:7vh;
	margin-top:8%;
}
.card{
	width:92vw;
	height:20vh;
	display: block;
	border-radius:0;
	margin-top: 2%;
}
.hover-text {
  background-color:#043a53;
  opacity:.8;
  padding: 3%;
  display:flex;
  position: absolute;
  border-radius: 0;
  top: 10%;
  left: 0%;
  width: 50%;
  height: 10%;
  transform: none;
	justify-content: center; 
	align-items: center; 
	text-align:center;  
	color: white; 
	font-size:3vh;
}
.hover-text p { 
	align-items: center; 
	text-align:center;  
	justify-content:center;
	color: white; 
	font-size:2.3vh;
	  top: -5%;
  left: 10%;
}
.slika{
	width: 100% !important; 
	color:#043a53;
    margin-bottom: 2% !important;
    text-align: center;
}

}

@media only screen and (orientation: portrait) {
.row{
	display:block;
	height:auto;
	margin:3%;
}
.col{
	width:100%;
	margin-bottom:0;
	height:auto;
}
.col p{
	font-size:3.3vh;
}
.col h1{
	font-size:7vh;
	margin-top:8%;
}
.card{
	width:92vw !important;
	height:20vh;
	display: flex;
	border-radius:0;
	margin-top: 2%;
}
.hover-text {
  background-color:#043a53;
  opacity:.8;
  padding: 3%;
  display:flex;
  position: absolute;
  border-radius: 0;
  top: 10%;
  left: 0;
  width: 50%;
  height: 10%;
  transform: none;
	justify-content: center; 
	align-items: center; 
	text-align:center;  
	color: white; 
	font-size:3vh;
}
.hover-text p { 
	align-items: center; 
	text-align:center;  
	justify-content:center;
	color: white; 
	font-size:2.3vh;
	top: -5%;
	left: 0;
	right:0;
}
.container_index {
  left:50%;
  margin-top:15%;
  width: 100vw;
  height:50vh;
  position:relative;
}
.container_index h1 {
  font-size: 15vh;
  position:center;
  text-align: center;
  justify-content:center;
  opacity:100;
}
.container_index p {
  color: white;
  width: 100%;
  font-size: 2.5vh;
  font-weight: 500;
  position: relative;
  transform: translateY(15%);
  text-align: center;
}
.container_index:hover h1:nth-child(2) {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  opacity:0;
  transform: none;
  transition: 0.7s;
}
.container_index:hover h1:nth-child(3) {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: none;
  opacity:0;
  transition: 0.7s;
}
.container_index:hover p {
	transition: 1.45s;
	opacity:100;
}
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
.row{
	display:flex;
	height:auto;
	margin:3%;
}
.col{
	width:50%;
	margin-bottom:0;
	height:auto;
}
.card{
	width:80vw;
	height:38vh;
	display: inline-block;
	border-radius: 20px;
	padding: 23% 23%;
	box-sizing: border-box;
	cursor: pointer;
	margin: 1%;
	background-position:center;
	background-size:cover;
	transition: transform 0.5s ease;
	z-index: 1;	
}
.col p{
	font-size:1vw;
}
.col h1{
	font-size:7vw;
	margin-top:8%;
}
.hover-text {
  background-color:#043a53;
  opacity:.8;
  padding: 3%;
  display:flex;
  position: absolute;
  border-radius: 0;
  top: 10%;
  left: 0;
  width: 94%;
  height: 10%;
  transform: none;
	justify-content: center; 
	align-items: center; 
	text-align:center;  
	color: white; 
	font-size:3vw;
}
.hover-text p { 
	align-items: center; 
	text-align:center;  
	justify-content:center;
	color: white; 
	font-size:1.7vw;
	top: -5%;
	left: 0;
	right:0;
}
.container_index {
  left:25%;
  bottom:0;
  width: 50vw;
  height:auto;
  position:relative;
  margin-bottom:45%;
}
.container_index h1 {
  font-size: 15vw;
  position:center;
  text-align: center;
  justify-content:center;
}
.container_index p {
  color: white;
  width: 100%;
  font-size: 2.5vw;
  font-weight: 500;
  position: absolute;
  transform: translateY(15%);
  text-align: center;
}
.container_index:hover h1:nth-child(2) {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transform: translateY(-35%);
  transition: 0.7s;
}
.container_index:hover h1:nth-child(3) {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(155%);
  transition: 0.7s;
}
.container_index:hover p {
	transition: 1.45s;
	opacity:100;
}
.slika{
	width: 100% !important;
}
}

@media only screen and (max-width: 415px) {
.container_index h1 {
  font-size: 11vh;
}
.container_index p {
  color: white;
  width: 100%;
  font-size: 2.5vh;
  font-weight: 500;
}
}